import React, {useState} from 'react';
import {Card, Typography} from 'antd';
import {PictureOutlined} from '@ant-design/icons';
import styles from './ReadingReflection.module.css';

const {Title, Paragraph, Link} = Typography;

const ReadingReflection = ({reflection, imageUrl, title}) => {
    const [isEditMode, setIsEditMode] = useState(false);
    const [newReflection, setNewReflection] = useState(reflection);
    const [newImageUrl, setNewImageUrl] = useState(imageUrl);

    const handleOpenEditMode = () => {
        setIsEditMode(true);
    };

    const handleCloseEditMode = () => {
        setIsEditMode(false);
        setNewReflection(reflection);
        setNewImageUrl(imageUrl);
    };

    const handleSubmit = () => {
        // 处理提交表单的逻辑
        setIsEditMode(false);
    };

    return (
        <Card className={styles.reflectionCard}>
            <Typography>
                <Title className={styles.reflectionTitle}>《{title}》读后感</Title>
                {reflection && (
                    <Paragraph className={styles.reflectionText}>{reflection}</Paragraph>
                )}
                {imageUrl && (
                    <>
                        <Title
                            level={4}
                            className={styles.imageTitle}>
                            <PictureOutlined/> 图片
                        </Title>
                        <img
                            className={styles.reflectionImage}
                            src={imageUrl}
                            alt='读后感相关图片'
                        />
                    </>
                )}
                <div className={styles.editLink}>
                    <Link onClick={handleOpenEditMode}>是否创建或修改读后感？</Link>
                </div>
            </Typography>
            {isEditMode && (
                <Card className={styles.editCard}>
                    <Typography>
                        <Title level={4}>编辑读后感</Title>
                        <textarea
                            className={styles.editReflectionTextarea}
                            placeholder='输入读后感...'
                            defaultValue={newReflection}
                            onChange={e => setNewReflection(e.target.value)}
                            autoFocus
                        />
                        <input
                            type='file'
                            onChange={e =>
                                setNewImageUrl(URL.createObjectURL(e.target.files[0]))
                            }
                        />
                        <div className={styles.editCardButtons}>
                            <button
                                className={styles.editCardButton}
                                onClick={handleSubmit}>
                                提交
                            </button>
                            <button
                                className={styles.editCardButton}
                                onClick={handleCloseEditMode}>
                                取消
                            </button>
                        </div>
                    </Typography>
                </Card>
            )}
        </Card>
    );
};

export default ReadingReflection;
